<template>
	<view class="create">
		<view :style="{ height: statusBarHeight }" class="uni-status-bar">

		</view>
		<view class="null-nav-bar">
			<img src="../../static/back.png" @click="goBack" />

		</view>

		<view class="top">
			<view class="top-bg" :class="{'active': topChoose == 1}" @click="navChange(1)">
				拉坯
			</view>
			<view class="top-bg" :class="{'active': topChoose == 2}" @click="navChange(2)">
				注塑
			</view>
			<view class="top-bg" :class="{'active': topChoose == 5}" @click="navChange(5)">
				速成
			</view>
			<view class="top-bg" :class="{'active': topChoose == 3}" @click="navChange(3)">
				配件
			</view>
			<view class="top-bg" :class="{'active': topChoose == 4}" @click="navChange(4)">
				贴图
			</view>
		</view>
		<view class="content choose1" v-show="topChoose == 1">
			<view class="" v-for="(items, index) in mainDataList1" :key="index">
				<view class="tip">
					<view class="text">
						{{items.name}}
					</view>
					<view class="line">

					</view>
				</view>
				<view class="list">
					<view class="list-item" :class="{'active': itemChoose == item.id}"
						v-for="(item, idx) in items.value" :key="idx" @longpress="showDetails(item)"
						@click="itemChange(item)">

						<image class="img" :src="item.thumb" mode="aspectFit"></image>
						<!-- 	<image class="design_price" src="../../static/design_price1.png" mode="aspectFit"
							v-if="item.design_price !='0.00'"></image> -->
					</view>
				</view>
			</view>
		</view>
		<view class="content " v-show="topChoose == 2">
			<view class="" v-for="(items, index) in mainDataList2" :key="index">
				<view class="tip">
					<view class="text">
						{{items.name}}
					</view>
					<view class="line">

					</view>
				</view>
				<view class="list">
					<view class="list-item" :class="{'active': itemChoose == item.id}"
						v-for="(item, idx) in items.value" :key="idx" @longpress="showDetails(item)"
						@click="itemChange(item)">
						<image class="img" :src="item.thumb" mode="aspectFit"></image>
						<!-- 	<image class="design_price" src="../../static/design_price1.png" mode="aspectFit"
							v-if="item.design_price !='0.00'"></image> -->
					</view>
				</view>
			</view>
		</view>
		<view class="content" v-show="topChoose == 3">
			<view class="" v-for="(items, index) in partsDataList" :key="index">
				<view class="tip">
					<view class="text">
						{{items.name}}
					</view>
					<view class="line">

					</view>
				</view>
				<view class="list">
					<view class="list-item" :class="{'active': itemChoose == item.id}"
						v-for="(item, idx) in items.value" :key="idx" @longpress="showDetails(item)"
						@click="itemChange(item, 2)">
						<image class="img" :src="item.thumb" mode="aspectFit"></image>
						<!-- <image class="design_price" src="../../static/design_price1.png" mode="aspectFit"
							v-if="item.design_price !='0.00'"></image> -->
					</view>
				</view>
			</view>
		</view>

		<view class="content choose2" v-show="topChoose == 4">
			<view class="tip">
				<view class="text">
					自定义贴图
				</view>
				<view class="line">

				</view>
			</view>
			<view class="list">
				<view class="list-item" :class="{'active': itemChoose == item.id}" v-for="(item, index) in stickerList"
					:key="index" @click="itemChange(item, 3)">
					<image class="img" :src="item.thumb" mode=""></image>
				</view>
			</view>
			<view class="sticker-btn" @click="toSticker">
				创建自定义贴图
			</view>
		</view>

		<view class="content " v-show="topChoose == 5">
			<view class="" v-for="(items, index) in mainDataList3" :key="index">
				<view class="tip">
					<view class="text">
						{{items.name}}
					</view>
					<view class="line">

					</view>
				</view>
				<view class="list">
					<view class="list-item" :class="{'active': itemChoose == item.id}"
						v-for="(item, idx) in items.value" :key="idx" @longpress="showDetails(item)"
						@click="itemChange(item)">
						<image class="img" :src="item.thumb" mode="aspectFit"></image>
						<!-- <image class="design_price" src="../../static/design_price1.png" mode="aspectFit"
							v-if="item.design_price !='0.00'"></image> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 主体 -->
		<view class="mask big" v-show="chooseArtShow">
			<view class="mask-bg" @click="chooseArtShow = false">

			</view>
			<view class="details-box">
				<div class="close">
					<image src="../../static/search_delete.png" mode="" @click="chooseArtShow = false">
					</image>
				</div>

				<view class="title" v-if="topChoose == 3">
					是否确定选择该配件
				</view>
				<view class="title" v-else>
					是否确定选择该主体
				</view>
				<view class="box-content">
					<view class="box-left">
						<image class="img" v-if="topChoose == 3" :src="artDetailData.thumb" mode="aspectFit"></image>
						<image class="img" v-else :src="artDetailData.enlarge_image" mode="aspectFit"></image>
					</view>
					<view class="box-right">
						<view class="row">
							<view class="row-left">
								名称
							</view>
							<view class="row-right">
								{{artDetailData.name}}
							</view>
						</view>
						<view class="row">
							<view class="row-left">
								长宽高
							</view>
							<view class="row-right">
								{{(parseFloat(artDetailData.length) || "") + "*" + (parseFloat(artDetailData.width) || "") + "*" + (parseFloat(artDetailData.height) || "")}}
							</view>
						</view>
						<view class="row">
							<view class="row-left">
								设计师
							</view>
							<view class="row-right">
								{{artDetailData.designer || ""}}
							</view>
						</view>
						<view class="row">
							<view class="row-left">
								设计费
							</view>
							<view class="row-right">
								{{artDetailData.design_price || ""}}
							</view>
						</view>
						<view class="row">
							<view class="row-left">
								总价
							</view>
							<view class="row-right">
								{{artDetailData.total_price || ""}}
							</view>
						</view>
					</view>
				</view>
				<view class="flex-between name">
					<input ref="name" id="name" v-focus type="text" v-model="artName" value=""
						placeholder="点这里可以给作品起名字哦" />
					<view v-if="artName" class="smallText" @click="editName">名称可修改</view>
				</view>

				<view class="btn-group">
					<!-- <view class="btn close" @click="chooseArtShow = false">
						取消
					</view> -->

					<!-- 				<view class="btn" v-if="artDetailData.is_collect == 1" @click="unCollect(artDetailData.id)">
						<image class="img" src="../../static/art_collect.png" mode=""></image>
						<text>取消收藏</text>
					</view>
					<view class="btn" v-if="artDetailData.is_collect == 0" @click="collect(artDetailData.id)">
						<image class="img" src="../../static/art_uncollect.png" mode=""></image>
						<text>收藏</text>
					</view -->
					<view></view>
					<view class="btn toCreate" @click="toCreate">
						<image class="img" src="../../static/create.png" mode=""></image>
						<text>确定</text>
					</view>
					<view class="icon" v-if="artDetailData.is_collect == 1" @click="unCollect(artDetailData.id)">
						<image class="img" src="../../static/art_collect.png" mode=""></image>
					</view>
					<view class="icon" v-if="artDetailData.is_collect == 0" @click="collect(artDetailData.id)">
						<image class="img" src="../../static/art_uncollect.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 贴图 -->
		<view class="mask big" v-show="chooseDrawShow">
			<view class="mask-bg" @click="chooseDrawShow = false">

			</view>
			<view class="details-box" :style="{'height':'900rpx'}">
				<image class="close" src="../../static/search_delete.png" mode="" @click="chooseDrawShow = false">
				</image>
				<view class="title">
					详情
				</view>
				<view class="box-content">
					<view class="box-left">
						<image class="img" :src="drawDetailData.thumb" mode="aspectFit"></image>
					</view>
					<view class="box-right">
						<view class="row">
							<view class="row-left">
								名称
							</view>
							<view class="row-right">
								{{drawDetailData.name}}
							</view>
						</view>
						<view class="row">
							<view class="row-left">
								总价
							</view>
							<view class="row-right">
								{{reqDrawPrice(drawDetailData)}}
							</view>
						</view>
					</view>
				</view>
				<view class="btn-group justify-center">
					<view class="btn toCreate" @click="drawDelete(drawDetailData.id)">
						<image class="img" src="../../static/tiehua_delete.png" mode=""></image>
						<text>删除</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 长按 -->
		<view class="mask" v-show="artDetailShow">
			<view class="mask-bg" @click="artDetailShow = false">

			</view>
			<view class="details-box">
				<view class="close">

				</view>
				<view class="title">
					详情
				</view>
				<view class="box-content">
					<view class="box-left">
						<image class="img" :src="artDetailData.enlarge_image" mode=""></image>
					</view>
					<view class="box-right">
						<view class="row">
							<view class="row-left">
								名称
							</view>
							<view class="row-right">
								{{artDetailData.name}}
							</view>
						</view>
						<view class="row">
							<view class="row-left">
								长宽高
							</view>
							<view class="row-right">
								{{(parseFloat(artDetailData.length) || "") + "*" + (parseFloat(artDetailData.width) || "") + "*" + (parseFloat(artDetailData.height) || "")}}
							</view>
						</view>
						<view class="row">
							<view class="row-left">
								设计师
							</view>
							<view class="row-right">
								{{artDetailData.designer || ""}}
							</view>
						</view>
						<view class="row">
							<view class="row-left">
								设计费
							</view>
							<view class="row-right">
								{{artDetailData.design_price || ""}}
							</view>
						</view>
						<view class="row">
							<view class="row-left">
								总价
							</view>
							<view class="row-right">
								{{artDetailData.big_size_price || ""}}
							</view>
						</view>
						<view class="icon" v-if="artDetailData.is_collect == 1" @click="unCollect(artDetailData.id)">
							<image class="img" src="../../static/art_collect.png" mode=""></image>
						</view>
						<view class="icon" v-if="artDetailData.is_collect == 0" @click="collect(artDetailData.id)">
							<image class="img" src="../../static/art_uncollect.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mask" v-show="maskShow">
			<view class="mask-bg" @click="maskShow = false">

			</view>
			<view class="mask-box">
				<view class="">
					<view class="title">
						点击图片选择可用主体
					</view>
					<view class="main-box">
						<view class="" v-for="(items, index) in mainByPartsList" :key="index">
							<view class="tip">
								<view class="text">
									{{items.type==1?"拉坯":items.type==2?"注塑":"速成"}}

								</view>
								<view class="line">

								</view>
							</view>
							<view class="list">
								<view class="list-item" :class="{'active': itemChoose == item.id}"
									v-for="(item, idx) in items.value" :key="idx" @click="partsToCreate(item)">
									<image class="img" :src="item.thumb" mode="aspectFit"></image>
								</view>
							</view>
						</view>
					</view>

					<view class="btn-group flex-center">
						<!-- 						<view class="btn close" @click="chooseArtShow = false">
							取消
						</view> -->

						<view class="btn" @click="maskShow = false">
							<text>取消</text>
						</view>
						<!-- 					<view class="btn confirm" @click="toCreate">
							<text>确定</text>
						</view> -->
					</view>
				</view>
			</view>
		</view>

		<view class="help" @click="helpModelShow=true">
			<img src="../../static/bangzhu.png" />
		</view>
		<view class="helpModel" v-show="helpModelShow">
			<view class="modelTop">
				<view :style="{ height: statusBarHeight }">
				</view>
				<view class="null-nav-bar">
				</view>
			</view>
			<view class="modelBtn">
				<view :class="guide.id==i.id?'curr':''" v-for="(i,ind) in guideList">
					<img class="finger" src="../../static/finger.gif" v-show="guide.id==i.id" />
				</view>
			</view>
			<view class="modelBottom" @click="next">
				<view class="textmsg">
					<view v-html="guide.text">
					</view>
					<view class="textSecond" v-html="guide.textSecond">
					</view>
					<img class="" src="../../static/IMG_2090.png" />
				</view>
				<view class="btn">
					我知道了
				</view>
				<img class="closeMo" src="../../static/search_delete2.png" @click.stop="closeHelpModel" />
			</view>



		</view>

	</view>

	</view>
</template>

<script>
	import {
		mainList,
		partsList,
		mainByParts,
		getUserApplique,
		getMainDetail,
		getPartsDetail,
		getAppliqueDetail,
		addCollect,
		cancelCollect,
		delUserApplique
	} from "@/api/public.js"
	export default {
		data() {
			return {
				topChoose: 1,
				itemChoose: "",
				statusBarHeight: 20,
				partsDataList: [],
				mainDataList1: [],
				mainDataList2: [],
				mainDataList3: [],
				stickerList: [],
				mainByPartsList: [],
				showList: [],
				maskShow: false,
				chooseArtId: "",
				chooseArtShow: false,
				artDetailShow: false,
				artDetailData: {},
				chooseDrawShow: false,
				drawDetailData: {},
				patternId: "",
				artName: "",
				// artName: uni.getStorageSync("userInfo") ? JSON.parse(uni.getStorageSync("userInfo")).nickName + "的作品" : "",
				helpModelShow: false, //帮助弹窗
				guideList: [{
						id: 1,
						text: "使用“拉坯”成型的方式进行创作选择喜欢的器型，开始创作吧",
						textSecond: "",
						is: false,
					},
					{
						id: 2,
						text: "使用“注塑”成型的方式进行创作选择喜欢的器型，开始创作吧",
						textSecond: "",
						is: false,
					},
					{
						id: 3,
						text: " 在已限定器型与釉的组合下<br/>进行贴图创作吧！<br/>特点：<br/>*定制周期更短<br/>*价格更优惠",
						textSecond: "",
						is: false,
					},
					{
						id: 4,
						text: "选择喜欢的配件<br/>找到可以匹配的器型，开始创作吧！",
						textSecond: "",
						is: false,
					},
					{
						id: 5,
						text: "点击下方“创建自定义贴图 ”按钮可添加文字和贴图库中的图片创作出自己的贴图保存后可以在陶艺创作中选择使用",
						textSecond: "*贴图创作时避免重叠哦<br/>*文案为手写字体，显示效果会有轻微<br/>差异哦",
						is: false,
					},
				],
				guide: { //引导对象
					text: "",
					id: 1,
					textSecond: ""
				},
				guideNum: 1,
				vFocus: false

			}
		},
		onShow() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
			this.getInfo();
			if (!uni.getStorageSync("createArtworkToast")) {
				this.helpModelShow = true; //你搞一下吧我不动了

				// uni.showToast({
				// 	duration: 1500,
				// 	icon: "none",
				// 	title: "选择喜欢的器型"
				// })
				// toastStr += 1
				// uni.setStorageSync("createArtworkToast", toastStr);
			}
			this.guide = this.guideList[0];
		},
		watch: {
			topChoose(newVal) {
				uni.hideToast();
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			reqDrawPrice(item) {
				if (item.big_size_price != "0.00") {
					return item.big_size_price
				}
				if (item.middle_size_price != "0.00") {
					return item.middle_size_price
				}
				if (item.small_size_price != "0.00") {
					return item.small_size_price
				}
			},
			navChange(type) {
				this.topChoose = type;
				this.itemChoose = "";
				this.getInfo();
			},
			getInfo() {
				switch (this.topChoose) {
					case 1:
						mainList(1).then(res => {
							this.mainDataList1 = res.reData.data;
						});
						break;
					case 2:
						mainList(2).then(res => {
							this.mainDataList2 = res.reData.data;
						});
						break;
					case 3:
						partsList().then(res => {
							this.partsDataList = res.reData.data;
						});
						break;
					case 4:
						getUserApplique().then(res => {
							console.log(res)
							this.stickerList = res.reData.data;
						});
						break;
					case 5:
						mainList(3).then(res => {
							this.mainDataList3 = res.reData.data;
						});
						break;
				}


			},
			showDetails(item) {
				return false
				this.artDetailShow = true;
				this.chooseArtId = item.id;
				this.getShowDetails();
			},
			getShowDetails() {
				switch (this.topChoose) {
					case 1:
						getMainDetail(this.chooseArtId).then(res => {
							this.artDetailData = res.reData.data;
						})
						break;
					case 2:
						getMainDetail(this.chooseArtId).then(res => {
							this.artDetailData = res.reData.data;
						})
						break;
					case 3:
						getPartsDetail(this.patternId).then(res => {

							this.artDetailData = res.reData.data;
						})
						break;
					case 4:
						getAppliqueDetail(this.chooseArtId).then(res => {
							this.artDetailData = res.reData.data;
						})
						break;
					case 5:
						getMainDetail(this.chooseArtId).then(res => {
							this.artDetailData = res.reData.data;
						})
						break;
				}
			},
			collect(id) {
				let type = 0;
				switch (this.topChoose) {
					case 1:
						type = 6
						break;
					case 2:
						type = 6
						break;
					case 3:
						type = 5
						break;
					case 4:
						type = 4
						break;
				}
				addCollect(id, type).then(res => {
					console.log(res);
					this.getShowDetails();
					this.getInfo();
				})
			},
			unCollect(id) {
				let type = 0;
				switch (this.topChoose) {
					case 1:
						type = 6
						break;
					case 2:
						type = 6
						break;
					case 3:
						type = 5
						break;
					case 4:
						type = 4
						break;
				}
				cancelCollect(id, type).then(res => {
					console.log(res);
					this.getShowDetails();
					this.getInfo();
				})
			},
			itemChange(item, type) {
				console.log(item)
				this.artName = item.name;
				this.itemChoose = item.id;
				if (type == 3) {
					this.chooseDrawShow = true;
					this.drawDetailData = item;
				} else {
					if (uni.getStorageSync("userData")) {
						this.chooseArtShow = true;
						if (type == 2) {
							this.patternId = item.id
						} else {
							this.chooseArtId = item.id;
						}
						this.getShowDetails();
					} else {
						uni.navigateTo({
							url: "../index/getUserInfo"
						})
					}
				}
			},
			toCreate() {
				if (this.artName) {
					if (this.topChoose == 3) {
						this.getMainByParts(this.patternId);
						this.chooseArtShow = false;
						this.maskShow = true;
					} else {
						uni.navigateTo({
							url: "artwork?id=" + this.chooseArtId + "&artName=" + this.artName
						})
					}
				} else {
					ni.showToast({
						duration: 1500,
						icon: "none",
						title: "请输入作品名称"
					})
				}
			},
			partsToCreate(item) {
				uni.navigateTo({
					url: "artwork?id=" + item.id + "&artName=" + this.artName
				})
			},
			toSticker() {
				if (uni.getStorageSync("userData")) {
					uni.navigateTo({
						url: "/pages/others/sticker"
					})
				} else {
					uni.navigateTo({
						url: "/pages/index/choose"
					})
				}
			},
			getMainByParts(id) {
				mainByParts(id).then(res => {
					console.log(res)
					this.mainByPartsList = res.reData.data;
				})
			},
			drawDelete(id) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '请确认是否删除贴图',
					success: function(res) {
						if (res.confirm) {
							delUserApplique(id).then(res => {
								that.chooseDrawShow = false;
								that.getInfo();
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			next() { //引导下一步
				this.guideNum++
				if (this.guideNum > 5) {
					this.guide = JSON.parse(JSON.stringify(this.guideList[0]));
					this.guideNum = 1;
					this.helpModelShow = false;
					uni.setStorageSync("createArtworkToast", "1");
				} else {
					this.guide = JSON.parse(JSON.stringify(this.guideList[this.guideNum - 1]))
				}

			},
			//关闭
			closeHelpModel() {
				this.helpModelShow = false;
				uni.setStorageSync("createArtworkToast", "1");
			},
			//修改作品名字
			editName() {
				this.vFocus = true;
			}


		},
	}
</script>

<style lang="scss" scoped>
	.create {
		position: fixed;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		background-image: url(https://testqiniu.pinqiart.com/gameback.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		padding: 0rpx 30rpx 30rpx;

		.null-nav-bar {
			height: 88rpx;
			line-height: 88rpx;
			color: #fff;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			flex-shrink: 0;

			>img {
				height: 35rpx;
				width: 20rpx;
			}

		}

		.top {
			display: flex;
			flex-shrink: 0;

			.top-bg {
				width: 24%;
				height: 100rpx;
				background-image: url(../../static/unchoose.png);
				background-size: 100% 100%;
				margin-right: 10rpx;
				font-size: 34rpx;
				line-height: 100rpx;
				text-align: center;
				color: #573E27;

				&.active {
					height: 110rpx;
					background-image: url(../../static/choose.png);
				}
			}

			>.top-bg:last-child {
				margin-right: 0;
			}

		}

		.content {
			position: relative;
			padding: 30rpx;
			background: rgba(252, 246, 234, 0.9);
			border-radius: 16rpx;
			flex-grow: 1;
			overflow-y: auto;

			&.choose1 {
				border-radius: 0 16rpx 16rpx 16rpx;
			}

			&.choose2 {
				border-radius: 16rpx 0 16rpx 16rpx;
			}

			.tip {
				display: flex;
				align-items: center;

				.text {
					font-size: 24rpx;
					line-height: 36rpx;
					color: #422B22;
					margin-right: 20rpx;
				}

				.line {
					flex-grow: 1;
					height: 2rpx;
					background: #CECECE;
				}
			}

			.list {
				padding: 20rpx 0 0 100rpx;
				display: flex;
				flex-wrap: wrap;
			}

			.list-item {
				width: 108rpx;
				height: 108rpx;
				border-radius: 10rpx;
				background: #fff;
				margin-right: 16rpx;
				margin-bottom: 40rpx;
				border: 2px solid #fff;
				position: relative;

				&.active {
					border: 2px solid #F8D06B;
				}

				.img {
					width: 100%;
					height: 100%;
				}

				.design_price {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 100%;
					height: 100%;
				}
			}

			.sticker-btn {
				position: fixed;
				left: 50%;
				bottom: 50rpx;
				width: 500rpx;
				height: 64rpx;
				line-height: 64rpx;
				font-size: 32rpx;
				text-align: center;
				color: #472f18;
				background: #f9d672;
				border-radius: 8rpx;
				transform: translate(-50%);
			}
		}

		.mask {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.6);
			z-index: 100;

			.smallText {
				text-align: center;
				color: #999;
				font-size: 22rpx;
			}

			&.big {
				.details-box {
					width: 600rpx;
					height: 1150rpx;
					background-color: rgba(252, 246, 234, 1);
				}

				z-index: 1000;
			}

			.mask-bg {
				width: 100%;
				height: 100%;

			}

			.details-box {
				box-sizing: border-box;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 700rpx;
				// height: 470rpx;
				border-radius: 20rpx;
				padding: 30rpx;
				background-color: rgba(252, 246, 234, 1);

				.close {
				
					position: absolute;
					top: 0;
					right: 0;
					padding: 38rpx 50rpx 20rpx 50rpx;
					// top: 38rpx;
					// right: 50rpx;

					image {
						width: 36rpx;
						height: 36rpx;
					}

				}

				.title {
					text-align: center;
					font-size: 36rpx;
					// line-height: 64rpx;
					color: rgba(71, 47, 24, 1);
					margin-bottom: 20rpx;
				}

				.box-content {
					.box-left {
						width: 500rpx;
						height: 500rpx;
						margin: 0 auto 20rpx;
						flex-shrink: 0;

						.img {
							width: 100%;
							height: 100%;
							box-shadow: 10rpx 10rpx 20rpx rgba(143, 137, 130, 0.38);
							border-radius: 10rpx;
						}
					}

					.box-right {
						border: 2rpx solid rgba(171, 142, 143, 1);
						width: 500rpx;
						margin: 0 auto;
						border-radius: 20rpx;
						font-size: 28rpx;
						line-height: 48rpx;
						text-align: center;
						flex-grow: 1;
						background-color: rgba(244, 229, 196, 1);
						box-shadow: 5px 5px 10px rgba(143, 137, 130, 0.38);
						color: rgba(129, 85, 84, 1);

						.row {
							display: flex;

							.row-left {
								width: 160rpx;
								font-weight: 700;
							}

							.row-right {
								text-align: center;
								padding: 0 10rpx;
								flex-grow: 1;
							}
						}
					}
				}

				.name {
					align-items: center;

					>input {
						width: 60%;
						height: 60rpx;
						padding-left: 20rpx;
						margin: 20rpx auto;
						background: rgba(219, 210, 199, 1);
						box-shadow: 5px 5px 10px rgba(196, 184, 167, 1) inset;
						font-size: 26rpx;
						border-radius: 30rpx;

						padding-right: 20rpx;

					}
				}

				.btn-group {
					width: 100%;
					// display: flex;
					// justify-content: space-between;
					// align-items: center;
					margin-top: 30rpx;
					position: relative;

					.btn {
						// display: flex;
						// flex-direction: column;
						// justify-content: center;
						// align-items: center;
						width: 200rpx;
						height: 100rpx;
						font-size: 32rpx;
						text-align: center;
						line-height: 44rpx;
						background-color: rgba(188, 158, 132, 1);
						border-radius: 50rpx;
						color: #fff;
						margin: auto;
						padding-top: 15rpx;
						box-sizing: border-box;
						box-shadow: 5px 5px 10px rgba(189, 185, 166, 0.5);


						.img {
							display: block;
							margin: auto;
							width: 35rpx;
							height: 30rpx;

						}

					}

					>.icon {
						position: absolute;
						width: 60rpx;
						height: 60rpx;
						right: 40rpx;
						top: 50%;
						transform: translate(0rpx, -50%);

						>image {
							width: 100%;
							height: 100%;
						}
					}

					&.justify-center {
						justify-content: center;
					}
				}
			}

			.mask-box {
				box-sizing: border-box;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 600rpx;
				max-height: 800rpx;
				border-radius: 20rpx;
				padding: 30rpx;
				background-color: rgba(252, 246, 234, 1);

				.main-box {
					max-height: 560rpx;
					overflow-y: auto;
				}

				.title {
					font-size: 32rpx;
					line-height: 56rpx;
					color: #333;
					font-weight: 700;
					text-align: center;
				}

				.tip {
					display: flex;
					align-items: center;

					.text {
						font-size: 24rpx;
						line-height: 36rpx;
						color: #422B22;
						margin-right: 20rpx;
					}

					.line {
						flex-grow: 1;
						height: 2rpx;
						background: #CECECE;
					}
				}

				.list {
					padding: 20rpx 0 0 100rpx;
					display: flex;
					flex-wrap: wrap;
				}

				.list-item {
					width: 110rpx;
					height: 100rpx;
					border-radius: 10rpx;
					background: #fff;
					margin-right: 16rpx;
					margin-bottom: 40rpx;
					border: 2px solid #fff;
					position: relative;

					&.active {
						border: 2px solid #F8D06B;
					}

					.img {
						width: 100%;
						height: 100%;
					}

					.design_price {
						position: absolute;
						bottom: 0;
						right: 0;
						width: 100%;
						height: 100%;
					}
				}

				.btn-group {
					width: 100%;
					// display: flex;
					// justify-content: space-between;
					// align-items: center;
					margin-top: 30rpx;

					.btn {

						margin: auto;
						width: 200rpx;
						height: 80rpx;
						font-size: 32rpx;
						text-align: center;
						line-height: 80rpx;
						background-color: rgba(188, 158, 132, 1);
						border-radius: 40rpx;
						color: rgba(130, 85, 85, 1);

						&.confirm {
							background-color: rgba(249, 214, 114, 1);
						}
					}

					&.flex-center {
						justify-content: center;
					}
				}
			}
		}
	}

	.help {
		position: fixed;
		width: 80rpx;
		height: 80rpx;
		background-color: indianred;
		bottom: 200rpx;
		right: 50rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;

		>img {
			width: 100%;
			height: 100%;
		}
	}

	.helpModel {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		padding: 0rpx 30rpx 30rpx;

		.modelTop {
			background: rgba(0, 0, 0, 0.5);

			>view {
				width: 100%;
			}
		}

		.modelBtn {
			height: 100rpx;
			display: flex;

			.curr {
				background: rgba(0, 0, 0, 0);
			}

			>view {
				background: rgba(0, 0, 0, 0.5);
				width: 24%;
				height: 100%;

				position: relative;

				>.finger {
					position: absolute;
					width: 38px;
					height: 46px;
					bottom: -50rpx;
					right: 0;


				}
			}
		}

		.modelBottom {
			background: rgba(0, 0, 0, 0.5);
			width: 100%;
			height: calc(100% - 200rpx);

			padding: 40rpx;
			box-sizing: border-box;

			.textmsg {
				position: relative;

				>img {
					position: absolute;
					top: -35px;
					right: 0;
					width: 70px;
					height: 70px;

				}

				margin:auto;
				margin-top:50rpx;
				line-height:60rpx;
				border: 1rpx dotted #fff;
				border-radius: 20rpx;
				padding: 40rpx;
				color:#fff;

			}

			>.btn {
				border: 1rpx dotted #fff;
				background: rgba(56, 56, 56, 0.7);
				border-radius: 40rpx;
				margin: auto;
				width: 40%;
				color: #fff;
				text-align: center;
				padding: 15rpx;
				position: fixed;
				top: 60%;
				left: 50%;
				transform: translate(-50%, -50%);
				// margin-top: 100rpx;

			}

			>.closeMo {
				width: 50rpx;
				height: 50rpx;
				position: fixed;
				top: 65%;
				left: 50%;
				margin-top: 30rpx;
				transform: translate(-50%, -50%);

			}

		}
	}


	.uni-status-bar {
		// width: 750rpx;
		height: 20px;
		background: transparent;
		flex-shrink: 0;
		// height: var(--status-bar-height);
	}

	.null-nav-bar {
		flex-shrink: 0;
	}
</style>